<template>
	<view>
		<!-- 注：正常情况下，“unicloud-db”组件将渲染一个符合查询条件的数据集合，但是由于此处只需要渲染符合查询条件的一条数据，所以此处使用了“getOne”属性（它是一个布尔属性，也可以被写成“:getOne='true'”的形式）↓ -->
		<!-- <unicloud-db v-slot:default="{ data, pagination, hasMore, loading, error, options }" :collection="colList" getOne> -->
		<unicloud-db @load="handlerForLoadDatabase"
			v-slot:default="{ data, pagination, hasMore, loading, error, options }" :collection="colList" getOne>
			<!-- <view v-if="loading" class="detailLoading">数据正在被加载</view> -->
			 <!-- 通过下面的这个条件，让“数据没有值（数据未被读取完毕）”和“loading为true”时都显示“数据正在被加载”↓ -->
			<view v-if="loading || !data" class="detailLoading">数据正在被加载</view>
			<!-- <view v-else>{{ data }}</view>	-->
			<view v-else>
				<view class="detailHeader">
					<!-- 注：此处使用了“短路运算”来确保只有在“data.user_id”存在的情况下，才会渲染下面的内容。如果不存在“data.user_id”，则显示默认值“未知”↓ -->
					<!-- 此处用“handlerForUserClickTheAuthorInTheDetailHeader”方法来验证“data”中是否包含了“user_id”和“category_id”、“avatarfile”↓ -->
					<view class="authorInTheDetailHeader" @click="handlerForUserClickTheAuthorInTheDetailHeader(data)">
						<!-- 作者：{{ data.user_id && data.user_id[0] && data.user_id[0].nickname || '未知' }} -->
						<!-- 注：这里直接用上面的这一行代码时也会出现下面显示图片时遇到的那个“数据访问时机”问题（控制台显示原始数据“rawData[0].user_id[0].nickname”和“rawData[0].category_id[0].name”确实有值，
						但模板中直接访问data.user_id[0].nickname却得到undefined，这表明Vue的响应式系统还未完成对嵌套数组元素的代理）。解决办法：把上面的这一行被注释的代码改为下面的这一行代码（下面显示“分类名称”时也会出现这个问题）↓ -->
						作者：{{ data[0]?.user_id?.[0]?.nickname || '未知' }}
					</view>
					<!-- <view class="authorInTheDetailHeader">{{ data.user_id && data.user_id[0] && data.user_id[0].nickname || '未知'}}</view> -->
					<!-- 可选链操作符写法↓ -->
					<!-- <view class="authorInTheDetailHeader">{{ data.user_id && data?.user_id[0].nickname }}</view> -->
					<view class="categoryInTheDetailHeader">
						<!-- 分类：{{ data.category_id && data.category_id[0].name || '未知' }} -->
						分类：{{ data[0]?.category_id?.[0]?.name || '未知' }}
					</view>
				</view>
				<view class="detailBanner">
					<!-- <img class="imgInTheDetailBanner" :src="data.avatar_file.url" alt=""/> -->
					<!-- <img class="imgInTheDetailBanner" :src="data.avatar_file.image.url" alt=""/> -->
					<!-- <img class="imgInTheDetailBanner" :src="data.avatarfile.url" alt="" /> -->
					<!-- 注：上面的这一行代码↑是我按视频教程中写的代码，但是它在实际使用时，刷新页面时控制台中会报错提示“TypeError: Cannot read properties of undefined (reading 'url')”。因此我改用了下面的代码↓
					文心快码指出这是由于Vue 3的响应式系统的Proxy在数据初始化阶段造成的数据访问时机问题（这个“访问时机”具体是指“刷新页面时”，这个问题表现为“直接刷新页面时avatar_file可能还未加载完成”），并进一步解释了病因和最佳编程实践：“Vue 3使用Proxy实现响应式，有时直接访问嵌套属性会有延迟，导致在某些情况下无法正确访问嵌套属性。为了解决这个问题，可以使用可选链操作符（?）来安全地访问深层属性”↓	 -->
					<!-- 也正是因为存在这个问题↑，所以才会用到后面的“handlerForLoadDatabase”这个函数，并在其中绕过Proxy，去直接获取原始数据 -->
					<!-- <img v-if="data.avatarfile && data.avatarfile.url" class="imgInTheDetailBanner" :src="data.avatarfile && data.avatarfile.url" alt="" /> -->
					<!-- 注：如果不用“可选链运算符”，那么用短路运算来验证“avatarfile”是否存在也行↓ -->
					<img v-if="data[0]?.avatarfile?.url" class="imgInTheDetailBanner" :src="data[0].avatarfile.url" alt="" />
					<view v-else class="image-placeholder">
						图片加载中...（数据已接收但解析中）
					</view>
					<!-- 安全访问方式1：添加v-if保护 -->
					<!-- <img v-if="data.avatarfile && data.avatarfile.url" 
					class="imgInTheDetailBanner" 
					:src="data.avatarfile.url" 
					alt=""/> -->
					<!-- 安全访问方式2：添加加载状态 -->
					<!-- <view v-else class="image-placeholder">
						图片加载中...
					</view> -->
				</view>
				<view class="contantInTheDateilPage">
					<!-- <rich-text :nodes="data.content"></rich-text> -->
					<!-- 注：不知何故，此处不能直接使用“data.content”来渲染富文本内容，也要像“handlerForLoadDatabase”函数中那样通过原始数据来读取到“content”属性
					（文心快码续写代码时说因为“data”是一个Proxy对象（它是Vue 3的响应式系统的产物），而“rich-text”组件无法直接解析Proxy对象，不知道这个说法是否正确）↓ -->
					<rich-text :nodes="JSON.parse(JSON.stringify(data))[0]?.content"></rich-text>
				</view>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
let db = uniCloud.databaseForJQL() // 注：此处使用了uniCloud.databaseJQL()方法，它是uniCloud提供的数据库操作的入口。该方法返回一个“db”对象，它提供了各种数据库操作的方法
export default {
	/**
	 * 函数“onLoad”被用于处理页面加载时发生的事件
	 * @param options 被传递过来的参数（路由参数）
	 */
	onLoad(options) {
		if (options._id) {
			// 注：如果进入了这个代码块，那么说明存在“options._id”参数，也就是说，这个页面是被从其他地方（比如列表页）通过路由跳转过来的。
			this._id = options._id
		}
		uni.setNavigationBarTitle({
			title: options.title
		}) // 这个API被用于动态设置当前页面的标题
	}, // ←注：在uniAPP项目中，“onLoad”这个钩子函数被用于读取从其他页面传递过来的数据（也就是路由参数（一般是通过URL传递的参数（即query参数）），或者在页面加载时执行一些初始化操作
	data() {
		return {
			_id: '', // 菜谱的id
		}
	},
	computed: {
		colList() { // 注：1.此处定义了一个计算属性，它被用于获取数据库集合的引用；2.此处使用了“db”对象，它是uniCloud提供的数据库操作的入口。3.“doc”方法被用于获取单个文档的引用
			return [ // db.collection('food-list').doc(this._id).field('_id,title,category_id,avatarfile,status,user_id').getTemp(),
				// 注：经查询“unicloud”官方文档（网址：https://doc.dcloud.net.cn/uniCloud/jql.html#%E5%8D%95%E8%A1%A8%E6%9F%A5%E8%AF%A2）中的“JQL方法使用限制”章节下的“单表查询”和“联表查询”部分得知，“doc”方法只能被用于“单表查询”中，因此在下面的这一行代码中，我把“doc”方法替换成了“where”方法（“where”方法也可筛选出符合查询条件的那一条数据）
				// 对象写法（经实测，这种写法也行）↓
				/* db.collection('food-list').where({_id: this._id}).field('_id,title,category_id,avatarfile,status,user_id').getTemp(), */
				// 字符串写法（注意：双引号不能少）↓
				// db.collection('food-list').where(`_id == "${this._id}"`).field('_id,title,category_id,avatarfile,status,user_id').getTemp(),
				db.collection('food-list').where(`_id == "${this._id}"`).field('_id,title,category_id,avatarfile,status,user_id,content').getTemp(),
				db.collection('uni-id-users').field('_id,nickname,avatar_file').getTemp(),
				db.collection('opendb-mall-categories').field('_id,parent_id,name').getTemp(),
			]
		}
	},
	methods: {
		/**
		 * 函数“handlerForUserClickTheAuthorInTheDetailHeader”被用于处理用户点击详情页的作者昵称时发生的事件
		 * @param dataThatBeTransfered 被传递过来的数据
		 */
		// handlerForUserClickTheAuthorInTheDetailHeader(dataThatBeTransfered) {
		// 	// console.log(`用户点击了详情页的作者昵称，被传递过来的数据是：${dataThatBeTransfered}`); // 控制台中输出“用户点击了详情页的作者昵称，被传递过来的数据是：[object Object]”				
		// 	console.log(`用户点击了详情页的作者昵称，被传递过来的数据是：${JSON.stringify(dataThatBeTransfered)}`);
		// 	/* 控制台中输出：用户点击了详情页的作者昵称，被传递过来的数据是：[{"_id":"67ce85333f1a473be218ade7",
		// 	"user_id":[{"_id":"68a8284d8a5c782a2b091062","nickname":"abcd88732771","avatar_file":{"extname":"jpg","name":"68a5a52a466d413f7018802f1755686446155",
		// 	"url":"https://mp-5d9c2cea-49c5-482b-8313-d9f9661aa2b1.cdn.bspapp.com/cloudstorage/3c3e0d44-ac8b-4ff5-9b2d-0d35d8001437."}}],"status":1,"category_id":[{"_id":"67ce463ea7c4328611d6f1dd",
		// 	"name":"茄子","parent_id":"67ce45e52139298489395dc1"}],"title":"下饭的红烧茄子","avatarfile":{"extname":"jpg","fileType":"image","image":{"width":640,"height":520,"location":"blob:http://localhost:5173/3e2b96c1-4e9c-46c8-a1ec-956d2fed5322"},
		// 	"name":"24399440d55b4eea954676c39608ea08_690w_920h.jpg","path":"https://mp-5d9c2cea-49c5-482b-8313-d9f9661aa2b1.cdn.bspapp.com/20250825/红烧茄子.jpg","size":101993,"fileID":"https://mp-5d9c2cea-49c5-482b-8313-d9f9661aa2b1.cdn.bspapp.com/20250825/红烧茄子.jpg",
		// 	"url":"https://mp-5d9c2cea-49c5-482b-8313-d9f9661aa2b1.cdn.bspapp.com/20250825/红烧茄子.jpg","uuid":1741587760401,"status":"success","cloudPath":"1741587760401_0.jpg"}}]↑ */
		// 	// console.dir(dataThatBeTransfered); // Proxy(Array)
		// 	// console.log(dataThatBeTransfered.avatarfile.url); // 控制台中报错，输出“TypeError: Cannot read properties of undefined (reading 'url')”
		// 	// console.log(dataThatBeTransfered.user_id[0].nickname, dataThatBeTransfered.category_id[0].name);							
		// },
		/**
		 * 函数“handlerForLoadDatabase”被用于处理读取数据库时发生的事件
		 * @param dataThatBeLoaded 被加载的数据
		 */
		handlerForLoadDatabase(dataThatBeLoaded) {			
			/* console.log('完整数据:', JSON.parse(JSON.stringify(dataThatBeLoaded)))
			console.log('avatarfile结构:', dataThatBeLoaded?.avatarfile) */
			// 获取原始数据（绕过Proxy）
			const rawData = JSON.parse(JSON.stringify(dataThatBeLoaded))
			console.log('完整原始数据:', rawData)
			console.log('原始avatarfile数据:', rawData[0]?.avatarfile)
			console.log(`读取到的内容是：${rawData[0]?.content}`);
			/* 执行上面的这一行代码时，控制台中输出：“读取到的内容是：<h2>用料</h2><ul><li>排骨&nbsp;500克</li><li>豆豉&nbsp;2勺</li><li>蒜&nbsp;1个瓣</li><li>南瓜&nbsp;100克</li></ul><p><br></p><p>步骤 1：
			准备一斤猪助排，剁好的排骨加一勺面粉和清水反复抓洗两分钟，再用清水多清洗几遍，这样的排骨才不会有腥味。</p><p><img src="https://mp-85edab6b-d71b-4772-a9cf-b48033ae2a97.cdn.bspapp.com/20250310/17415879604281.jpg" width="80%"></p>
			<p>步骤 2：碗中放2勺蒜末，2勺豆豉，淋上热油激发香味，加2勺生抽+1勺蚝油+少许盐、白糖调味。</p><p><img src="https://mp-85edab6b-d71b-4772-a9cf-b48033ae2a97.cdn.bspapp.com/20250310/17415879664352.jpg" width="80%"></p><p>步骤 3：
			搅拌均匀后倒入排骨中，再放1勺生粉抓拌均匀，腌制30分钟左右，盘底铺上南瓜片，水开上锅蒸25分钟。</p><p><img src="https://mp-85edab6b-d71b-4772-a9cf-b48033ae2a97.cdn.bspapp.com/20250310/17415879748133.jpg" width="80%"></p>” */
			// 更新模板引用（注：此处使用了“$nextTick”方法来确保在DOM更新完成后执行代码，这样可以避免在某些情况下出现数据还未完全加载完成，DOM还未被更新时就进行操作而导致的问题）
			this.$nextTick(() => {
				if (rawData[0]?.avatarfile?.url) {
					console.log('有效图片URL:', rawData[0].avatarfile.url)
				}
			})
		}
	}
}
</script>

<style>
.detailLoading {
	color: #999;
	text-align: center;
	margin: 30rpx 0;
	font-size: 36rpx;
}

/* .image-placeholder {
    width: 100%;
    height: 200px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
} */
 .detailHeader {
    display:flex;
	/* 注：“justify-content: space-between”表示“flex容器内的子元素沿着主轴（这里是水平方向）分布，两端对齐”↓ */
	justify-content: space-between;
	font-size: 30rpx;
	font-weight:bold;
	align-items: center;
	padding:30rpx;
}
/* .authorInTheDetailHeader, .categoryInTheDetailHeader {
    margin: 10rpx 0;
    font-size: 32rpx;
    color: #333;
} */
.detailBanner {
	width:100%;
	height:300rpx;
}
.imgInTheDetailBanner{
	width:100%;
	height:100%;
	/* “object-fit: cover”可以让图片填充整个容器，同时保持图片的宽高比不变（也就是不让图片被拉伸导致失真、变形）↓ */
	object-fit: cover;
}
.contantInTheDateilPage{padding: 30rpx;}
</style>
